<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-ua-compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width,initial-scale=1.0">
		<title></title>
		<style>
			body,ul{margin:0;padding:0;}
			ul{list-style:none;}
			.wrap{
				perspective:800px;
				position:relative;
				margin:50px auto;
				width:400px;
				height:400px;
			}
			.wrap .one{
				position:relative;
				top:75%;
				left:50%;
				width:400px;
				height:400px;
				transform: rotateY(0deg) rotateZ(0deg);
				transform-style:preserve-3d;
				transform-origin:200px 200px -200px;
				animation:fun 7s linear infinite;
				margin-left:-200px;
				margin-top:-200px;
				background-color: rgba(0,0,0,.5);
			}
			@keyframes fun{
				to{
					transform:rotateY(360deg) rotateZ(360deg);
					transform-origin:200px 200px -200px;
				}
			}
			.wrap .one li{
				position:absolute;
				top:0;
				left:0;
				width:100%;
				height:100%;
				font-size:50px;
				color:#fff;
				text-align:center;
				line-height:400px;
			}
			.wrap .one li img{
				opacity:.4;
			}
			.wrap .one li:nth-child(1){
				background-color:hsla(0,100%,50%,.3);
			}
			.wrap .one li:nth-child(2){
				background-color:hsla(60,100%,50%,.3);
				transform:translateZ(-400px);
			}
			.wrap .one li:nth-child(3){
				background-color:hsla(120,100%,50%,.3);
				transform:translateY(-400px) rotateX(90deg);
				transform-origin:bottom;
			}
			.wrap .one li:nth-child(4){
				background-color: hsla(180,100%,50%,.3);
				transform:translateY(400px) rotateX(-90deg);
				transform-origin:top;
			}
			.wrap .one li:nth-child(5){
				background-color: hsla(240,100%,50%,.3);
				transform:translateX(-400px) rotateY(-90deg);
				transform-origin:right;
			}
			.wrap .one li:nth-child(6){
				background-color: hsla(300,100%,50%,.3);
				transform:translateX(400px) rotateY(90deg);
				transform-origin:left;
			}
			
		</style>
	</head>
	<body>
		<div class="wrap">
		<ul class='one'>
				<li>
				<img width='400' height='400' src="1.jpg" alt="">
				</li>
				<li><img  width='400' height='400' src="4.jpg" alt=""></li>
				<li><img  width='400' height='400' src="3.jpg" alt=""></li>
				<li><img  width='400' height='400' src="2.jpg" alt=""></li>
				<li><img  width='400' height='400' src="5.jpg" alt=""></li>
				<li><img  width='400' height='400' src="6.jpg" alt=""></li>
			</ul>
			
		</div>
	</body>
</html>
	